<template>
  <div class="index-news-box clearfix">
    <div class="box clearfix">  
      <div class="location"><router-link to="/index">{{$t('common.nav.home')}}</router-link> > {{leftData.nav[type].name}}</div>
      <div class="mainLR clearfix">
        <mainLes :leftData = 'leftData' @leftChange="leftChange" />
        <div class="main-right">
          <div class="news-ri-tit flex-lect">{{leftData.nav[type].name}}</div>
          <div class="news-list clearfix">
            <router-link :to="url+type+'&id='+item.id+'&baom='+baom" class="news-item flex-bect" v-for="(item, index) in newsList" :key="index" tag="a" target="_blank">
              <h2 class="font14 flex-lect">
                <p class="ntit">{{item.informationTitle || item.activityTitle}}</p>
                <span class="newTag rd15" v-if="item.tagTxt && item.tag !=0">{{item.tagTxt}}</span>
              </h2>
              <span class="tr">{{item.updateTime.substr(0,10)}}</span>
            </router-link>
          </div>
          <el-pagination class="tc"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {ajax,showToast} from '@/utils/js.js'
import {getNews,gongaoList} from '@/services/api.js'
import mainLes from '@/components/mainLe.vue'
const log = console.log
export default {
  components:{
    mainLes
  },
  data() {
    return {
      newsList:[],
      type:0,
      url:'/news_detail?type=',
      pageNo:1,
      pageSize:10,  
      total:0,
      baom:"0",
    }
  },
  mounted(){
    log(this.$t('news.news'))
    let type = this.$route.query.type
    log('type',type)
    this.leftData.type = type
    this.type = type
    this.content(type)
    type == 0 ? this.baom = "0" : this.baom = "1"
  },
  computed:{
    leftData(){
      let data={
        type:0,
        tit:this.$t('news.newsDynamic'),
        nav:[
          {name:this.$t('news.news'),id:0},
          {name:this.$t('news.event'),id:1}
        ]
      }
      return data
    },
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
  methods:{
    leftChange(e){
      this.type = e.id
      this.pageNo = 1;
      this.content(e.id);
      e.id == 0 ? this.baom = "0" : this.baom = "1"
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.content();
    },
    content(type = this.type){
      let data={
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      let url = ''
      if(type == 0){
        url = getNews
      }else if(type == 1){
        url = gongaoList
      }
      ajax(this,url,data,res=>{
        this.newsList = res.data.records;
        this.total = res.data.total;
      },err=>{
        showToast(this,err.msg)
      })
    },
    //首页跳转
    indexLink(data){
     if(data.outLink && data.outLink==1){
        window.open(data.linkUrl,'-blank')
      }else{
        window.location.href = data.linkUrl
      }
    },
    
  }
  
}
</script>
<style lang="scss">
.newTag{position: relative;top:-10px;font-size:12px;font-weight: normal;color: #fff;background-color: red;padding:3px 5px;margin-left:5px;line-height:1;width: auto !important;}
</style>